<template>
  <div class="page-container">
    <div class="card">
      <page-title :title="title"></page-title>
      <el-row :gutter="10" class="button-container">
        <el-col :span="1.5">
          <el-button type="success" icon="el-icon-s-comment" size="mini" :loading="buttonLoading">查看评论</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-document-checked" size="mini" @click="update" :loading="buttonLoading">保存修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" icon="el-icon-delete" size="mini" :loading="buttonLoading" @click="cancelEdit">取消编辑</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 20px;">
        上次更新时间：{{ aboutMe.updateTime | dateFilter }}
      </el-row>
      <mavon-editor ref="mavon" class="markdown" v-model="aboutMe.content" :boxShadow="false"></mavon-editor>
    </div>
  </div>
</template>

<script>
import { getAboutMe, update } from '../../../../../api/blog/about-me'
import PageTitle from '../../../../../components/PageTitle/index.vue'

export default {
  name: 'AboutMe',

  components: { PageTitle },

  data () {
    return {
      // 页面标题
      title: '',
      // 关于我
      aboutMe: {
        // ID
        id: '',
        // 标题
        title: '',
        // 作者头像
        avatar: '',
        // 内容
        content: '',
        // 更新时间
        updateTime: ''
      },
      buttonLoading: false
    }
  },

  mounted () {
    // 赋值当前页面内容
    this.title = this.$route.meta.title
    // 获取关于我内容
    this.openLoading()
  },

  methods: {
    // 加载关于我数据
    openLoading () {
      const loading = this.$loading({
        lock: true,
        text: '正在加载关于我数据...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.9)'
      })
      getAboutMe().then((res) => {
        this.aboutMe = res
        setTimeout(() => {
          loading.close()
        }, 500)
      })
    },
    // 获取关于我内容
    getAboutMe () {
      // 打开按钮加载框
      this.buttonLoading = true
      getAboutMe().then((res) => {
        this.aboutMe = res
        this.buttonLoading = false
      })
    },
    // 保存更新内容
    update () {
      this.buttonLoading = true
      update(this.aboutMe).then((res) => {
        this.$message.success('更新成功')
        // 刷新当前内容
        this.getAboutMe()
      }).catch(() => {
        this.buttonLoading = false
      })
    },
    // 取消编辑按钮点击事件
    cancelEdit () {
      this.getAboutMe()
      this.$message.success('已取消当前编辑')
    }
  }
}
</script>

<style lang="scss" scoped>
.button-container {
  margin-top: 60px;
}
.markdown {
  min-height: calc(100vh - 335px);
}
.title-label {
  font-size: 25px;
  font-weight: 800;
}
</style>
